<template>
	<view class="container">
		<view class="text-easyinput">
			<uni-easyinput type="textarea" v-model="list.shopUnbindRemark" placeholder="请输入终端报修原因" />
		</view>
		<view class="text" style="margin-top: 15%;">
			<uv-row justify="space-between" customStyle="margin-bottom: 10px">
				<uv-col span="12">
					<upload :fileList="fileList" ref="upload"></upload>
				</uv-col>
				<uv-col span="1">
					<view></view>
				</uv-col>
				<uv-col span="1">
					<template>
						<upload-detail v-if="fileList.length" :fileList="fileList"></upload-detail>
					</template>
				</uv-col>

			</uv-row>
		</view>
		<view class="text" style="margin-top: 5%;">
			<view class="text-1">
				<view class="text-3">
					<uv-input v-model="list.shopUnbindAddress" placeholder="点击自动获取位置或手动输入位置信息" border="none"></uv-input>
				</view>
				<view class="text-4">
					<view class="text-2">
						<view class="imgData" style="margin-right: 10rpx;" @click="getLocation">
							<img style="max-width: 110rpx;max-height: 110rpx;" src="@/static/positioning.png" alt="" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="text-easyinput" style="margin-top: 5%;">
			<text style="color: #f50b0b;">提示:上传图片大小限制在10M以内。</text>
		</view>
		<view class="button-wrap">
			<!-- 提交 -->
			<button class="button-login" @click="navigateToAccountLogin">
				<text class="wx-login loginText1">提交</text>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		workOrderRepair
	} from "@/network/mine.js"
	// 上传图片 仅展示
	import upload from '../camera.vue'
	export default {
		components: {
			upload
		},
		data() {
			return {
				list: {
					mchId: "",
					snNumber: ""
				},
				fileList: []
			}
		},
		onLoad(e) {
			const arr = uni.getStorageSync('listData')
			console.log(arr)
			this.list.mchId = arr.id
			this.list.snNumber = arr.merNo
		},
		methods: {
			getLocation() {
				console.log(5151)
				uni.chooseLocation({
					success: (res) => {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						this.list.shopUnbindAddress = res.address;
						this.getPosSucc = true;
					},
					fail: () => {
						if (!this.list.shopUnbindAddress) {
							this.getPosSucc = false;
						}

					},
				});
			},
			getSampItemDetail() {
				// 上传图片数据
				let upload = []
				if (this.$refs.upload && this.$refs.upload.getData()) {
					upload = this.$refs.upload.getData().map((item) => {
						// return item.succImg[0];
						// console.log(item);
						this.list.shopUnbindUrl = item.succImg
					});
				}
			},
			navigateToAccountLogin() {
				this.getSampItemDetail()
				console.log(this.list);
				workOrderRepair(this.list).then(res => {
					console.log(res)
					const code = res.data.code;
					if (code == "000000") {
						uni.showToast({
							title: '报修成功',
							icon: 'success',
							duration: 2000
						})
						// 延时跳转
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages_subPack/mine/terminal/bound/index"
							})
						}, 1500)
					} else {
						uni.showToast({
							title: '报修失败',
							icon: 'none',
							duration: 2000
						})
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.imgData {
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
		// background-image: url('../../static/index.png');
		background-size: 100% 100%;
	}

	.text {
		width: 90%;
		height: 115rpx;
		border: 1px solid #031A6E;
		border-radius: 15px;
		margin-top: 10%;
	}

	.text-easyinput {
		width: 90%;
		height: 115rpx;
		border-radius: 15px;
		margin-top: 10%;
	}

	.text-1 {
		display: flex;
		justify-content: space-between;
	}

	/deep/.uv-input {
		height: 115rpx;
	}

	/deep/.is-input-border {
		border: 1px solid #031A6E;
		border-radius: 15px;
	}

	.button-wrap {
		width: 100%;
		margin-top: 70%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.button-login {
		width: 80%;
		height: 110rpx;
		border-radius: 20rpx;
		background: #222d65;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.button-wrap2 {
		margin-top: 20rpx;
	}
</style>